<template>
  <div class="searchbox">
    <el-row>
        <el-col class="dt" :span="3">关键字搜索：</el-col>
        <el-col class="dd" :span="19">
          <el-input class="wide" v-model="data.key_word" clearable placeholder="用户号/用户名/手机号" size="mini"></el-input>
        </el-col>
        <!-- <el-col class="dt" v-if="role==2||role==3" :span="3">部门用户查询:</el-col>
        <el-col  v-else :span="3"></el-col>
        <el-col class="dd"  :span="7">
          <div v-show="role==2||role==3">
            <tree-consultant placeholder="选择「顾问」" @depChange="handleDeptChange" @gwChange="handleGwChange"></tree-consultant>
          </div>
        </el-col> -->

        <el-col :span="2" class="dd text-right">
          <el-button size="mini" type="danger" @click="handleSearch">检索</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col class="dt" :span="3">
          <el-select v-model="timeType" placeholder="时间类型" style="margin-right:10px;" size="mini">
            <el-option v-for="item in timeTypeOption" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col class="dd" :span="9">
          <el-date-picker v-model="data.date_time" type="daterange" size="mini" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleRegDatesChange"></el-date-picker>
        </el-col>
        <el-col class="dt" :span="3">
          <el-select v-model="timeType2" placeholder="时间类型" style="margin-right:10px;" size="mini">
            <el-option v-for="item in timeTypeOption" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col class="dd" :span="9">
          <el-date-picker v-model="data.date_time2" type="daterange" size="mini" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="handleRegDates2Change"></el-date-picker>
        </el-col>
    </el-row>
    <el-row class="query-condition" style="background:#f3f3f3;">
        <el-col class="dt" :span="3">搜索条件：</el-col>
        <el-col class="dd" :span="16">
          <el-tag v-for="query in queryDict" :key="query.key" size="small" closable @close="onCloseTag(query.key)">
            <span class="tag-key">{{query.keyName}}:</span>{{query.text}}
          </el-tag>
        </el-col>
        <el-col class="dd text-right" :span="5">
          <el-button size="mini" @click="onResetSearch">重置搜索条件</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
// import treeConsultant from '@/components/basicdata/tree_consultant';
export default {
  props:{
    role:{type:Number,default:1}
  },
  components:{
    // treeConsultant
  },
  data(){
    return {
      timeType: '',
      timeType2: '',
      timeTypeOption: [{value: '1',text: '创建时间'},{value: '2',text: '开始时间'}],
      queryDict: [],
      data:{
        key_word:'',
        dept_id:'',
        gws:'',
        time_type:'',
        time_type2:'',
        date_time:[],
        date_time2:[]
      },
    };
  },
  watch: {
    timeType: function (value) {
      this.data.time_type = value > 0 ? value : 0;
      if (this.data.time_type > 0 && this.data.date_time != null && this.data.date_time.length > 0) {
        let text = this.formatDate(this.data.date_time[0]) + '-' + this.formatDate(this.data.date_time[1]);
        this.buildQueryDict('regDate', this.getTimeKeyName(this.data.time_type), text);
        this.handleChange();
      }
    },
    timeType2: function (value) {
      this.data.time_type2 = value > 0 ? value : 0;
      if (this.data.time_type2 > 0 && this.data.date_time2 != null && this.data.date_time2.length > 0) {
        let text = this.formatDate(this.data.date_time2[0]) + '-' + this.formatDate(this.data.date_time2[1]);
        this.buildQueryDict('regDate2', this.getTimeKeyName(this.data.time_type2), text);
        this.handleChange();
      }
    }
  },
  methods:{
    handleChange(){
      this.$emit('change', this.data);
    },
    handleSearch(){      
      if (this.data.key_word != '') {
        this.buildQueryDict('keyWord', '关键字搜索', this.data.key_word);
      } else {
        var index = this.queryDict.findIndex(x => x.key === 'keyWord');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      this.handleChange();
    },
    
    handleDeptChange(value) {
      this.data.dept_id = value;
    },
    handleGwChange(value) {
      this.data.gws = value;
    },
    handleRegDatesChange() {
      if (this.data.date_time != null && this.data.date_time.length > 0) {
        if (this.data.time_type > 0) {
          let text = this.formatDate(this.data.date_time[0]) + '-' + this.formatDate(this.data.date_time[1]);
          this.buildQueryDict('regDate', this.getTimeKeyName(this.data.time_type), text);
          this.handleChange();
        }
      } else {
        var index = this.queryDict.findIndex(x => x.key === 'regDate');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
        this.handleChange();
      }
    },
    handleRegDates2Change() {
      if (this.data.date_time2 != null && this.data.date_time2.length > 0) {
        if (this.data.time_type2 > 0) {
          let text = this.formatDate(this.data.date_time2[0]) + '-' + this.formatDate(this.data.date_time2[1]);
          this.buildQueryDict('regDate2', this.getTimeKeyName(this.data.time_type2), text);
          this.handleChange();
        }
      } else {
        var index = this.queryDict.findIndex(x => x.key === 'regDate2');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
        this.handleChange();
      }
    },
    onResetSearch() {
      this.data.key_word = '';
      this.data.dept_id = 0;
      this.data.gws = [];
      this.data.time_type = 0;
      this.data.date_time = [];
      this.data.time_type2 = 0;
      this.data.date_time2 = [];

      this.queryDict = [];
      this.handleChange();
    },
    //----------辅助类方法------------------------------------
    getTimeKeyName(value) {
      let obj = this.timeTypeOption.find(t => t.value == value);
      return obj.text;
    },
    formatDate(datetime) {
      return this.$Shared.formatDate(datetime);
    },
    buildQueryDict(key, keyName, text) {
      var index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
      }
      if (text != null && text != '') {
        this.queryDict.push({
          key: key,
          keyName: keyName,
          text: text
        });
      }
    },
    onCloseTag(key) {
      var index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
        this.removeKey(key);
      }
      this.handleChange();
    },
    removeKey(key) {
      switch (key) {
      case 'keyWord':
        this.data.key_word = '';
        break;
      case 'regDate':
        this.data.date_time = '';
        break;
      case 'regDate2':
        this.data.date_time2 = '';
        break;
      }
    },
    // GetQueryDict() {
    //   var dict = [];
    //   this.queryDict.forEach(qd => {
    //     dict.push({
    //       key: qd.key,
    //       keyText: qd.keyName,
    //       value: '',
    //       valueText: qd.text
    //     });
    //   });
    //   return dict;
    // }
  },
};
</script>


<style lang="scss" scoped>
  .searchbox .el-checkbox-group {
    display: inline-block;
    margin-right: 32px;
  }

  .searchbox .me-source {
    position: relative;
    left: 12.5%;
  }

  .searchbox .me-source .el-checkbox {
    width: 100px;
    margin-left: 0;
  }

  .searchbox .el-col {
    height: 34px;
    line-height: 34px;
  }
$navy_blue:#2e56a1;
.myselectoption {
  color: $navy_blue;
}

.myselectoption a {
  display: inline-block;
  margin-right: 22px;
  min-width: 22px;
  color: $navy_blue;
}

.myselectoption a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover,
.myselectoption a:hover {
  color: #0000ff;
}
</style>
